import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import Menu from "antd/lib/menu";
import ConfigProvider from "antd/lib/config-provider";
import zhCN from 'antd/es/locale/zh_CN';
import routes from "@/services/routes";
import PaymentList from "@/pages/payment/PaymentList";
import PaymentunList from "@/pages/payment/PaymentunList";


class PaymentToolBar extends React.Component {
  state = {
    loading: true,
    seltype: "1",
  };
  componentWillMount() {
  }
  tabsClick = e => {
    this.setState({
      loading: false,
      seltype: e.key,
    });
  };
  templateSelect=()=>{
      if (this.state.seltype === "1") {
         return ( <PaymentunList paytype={this.props.paytype} seltype={this.state.seltype} />);
      }else{
        return (<PaymentList paytype={this.props.paytype} seltype={this.state.seltype} />);
      }
  };
  render() {
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: "400px", height: "60px" }}>
          <div style={{ width: "20px", height: "50px", float: "left" }}>
          </div>
          <div style={{ width: "50px", height: "50px", float: "left" }}>
            <img src="/static/images/paymenttoolbar.png" alt="HR"  loading="lazy"/>
          </div>
          <div style={{ width: "320px", height: "30px", float: "left" }}>
            <h3 style={{ margin: "7px", padding: "0" }}>{this.props.paytype === 0 ? "付款信息列表" : "收款信息列表"}</h3>
          </div>
        </div>
         <Menu onClick={this.tabsClick} selectedKeys={this.state.seltype} mode="horizontal">
          <Menu.Item key="1">{this.props.paytype === 0 ? "待付款" : "待收款"}</Menu.Item>
          <Menu.Item key="2">{this.props.paytype === 0 ? "已付款" : "已收款"}</Menu.Item> 
        </Menu>
        {this.templateSelect()}
      </ConfigProvider>
    );
  }
}

routes.register(
  "Payment.List",
  routeWithUserSession({
    path: "/paymenttoolbarout",
    title: "付款信息列表",
    render: pageProps => <PaymentToolBar {...pageProps} paytype={0} />,
  })
);
routes.register(
  "Payment1.List",
  routeWithUserSession({
    path: "/paymenttoolbarin",
    title: "收款信息列表",
    render: pageProps => <PaymentToolBar {...pageProps} paytype={1} />,
  })
);